import React from 'react';
import { inject, observer} from 'mobx-react';
import { WeaLocaleProvider,WeaSelect, WeaTab, WeaTree, WeaBrowser, WeaNewScrollPagination,} from 'ecCom';
import { Spin, Alert} from 'antd';
import {toJS} from 'mobx';
import * as Api from '../../apis/staffKanban';
const getLabel = WeaLocaleProvider.getLabel;

@inject('staffKanbanStore')
@observer 
class LeftContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      viewcondition: 0,
      hrmdatas: [],
      selectAllkey: '',
      selectkeys: '',
    
    };
  }
  componentDidMount() {
    const {pageNum,getMySubs,getAttentionData,getAllManagerData} = this.props.staffKanbanStore;
    let attionparams = {
      pageNum: pageNum,
      needSelf: 1,
      noLimit: 0,    
    };
    getMySubs();
    getAttentionData(attionparams, (id) => this.setState({selectkeys: id}));
    getAllManagerData();
  }

  componentWillReceiveProps() {}

  addAttentionBrowser = (ids) => {
    const {addAttentionBrowser, getAttentionData, pageNum, defaultHrm, defaultkey, setState} = this.props.staffKanbanStore;
    let attionparams = {
      needSelf: 1,
      noLimit: 1,    
    };
    const callback = () => {
      setState({selectHrmStr: toJS(defaultHrm), selectKeyArr: defaultkey});
      this.setState({selectAllkey: '',selectkeys: defaultkey,});
    }
    addAttentionBrowser(ids, ()=>getAttentionData(attionparams, ()=>{callback()}));
  }

  changeTab = (e) => {
    const {getAttentionData,setState,defaultkey,defaultHrm,getMySubs} = this.props.staffKanbanStore;
    let params = {
      fromWeaSelect: 1,
    };
    if(e == 1) {
      getMySubs()
    }else if(e == 2) {
      let attionparams = {
        pageNum: 2,
        needSelf: 1,
        noLimit: 0,    
      };
      getAttentionData(attionparams)
    }
    setState({selectHrmStr: toJS(defaultHrm)});
    this.setState({viewcondition: e, selectAllkey: '',selectkeys: defaultkey,});
  }

  selectAll = (v) => {
    const {viewcondition} = this.state;
    const {myboss, attentionData, setState} = this.props.staffKanbanStore;
    let hrmArr = viewcondition == 0 ? toJS(myboss) : (viewcondition == 2 ? toJS(attentionData) : []);
    let selectkeys = '';
    let selecStr = [];
    if(v == '0') {
      hrmArr.map(res => {
        selecStr.push(res.name);
        selectkeys = selectkeys == '' ? selectkeys + res.key : selectkeys  + ',' + res.key;
      });
    }
    setState({selectKeyArr: selectkeys.split(','),selectHrmStr: selecStr});
    this.setState({selectkeys: selectkeys});
  }

  selectOne = (v) => {
    const {selectkeys,viewcondition} = this.state;
    const {myboss, attentionData, setState} = this.props.staffKanbanStore;
    let hrmArr = viewcondition == 0 ? toJS(myboss) : (viewcondition == 2 ? toJS(attentionData) : []);
    let arr = v.split(',');
    let hrmarr = this.setHrmString(hrmArr, arr);
    if(v != '' && arr.length == hrmArr.length) {
      this.setState({selectkeys: v, selectAllkey: '0'});
    }else{
      this.setState({selectkeys: v, selectAllkey: ''});
    }

    setState({selectKeyArr: arr, selectHrmStr: hrmarr});
  }

  setHrmString = (hrmArr, v) => { // 人员字符串
    let returnArr = [];
    hrmArr && hrmArr.map(res => {
      if(v.indexOf(res.id) > -1) {
        returnArr.push(res.name);
      }
    });
    return returnArr;
  }

  changeHrm_subs = (id, names, datas) => {
    const {getMySubs,setState} = this.props.staffKanbanStore;
    setState({selectHrmStr: names, selectKeyArr: id});
    getMySubs({rootid: id}, (id)=>this.setState({selectkeys: id}));
  }

  getPagenumAttention = () => {
    const { pageNum, totalpage, setState, getAttentionData } = this.props.staffKanbanStore;
    let attionparams = {
      pageNum: pageNum+1,
      needSelf: 1,
      noLimit: 0,    
    };
    
    if(pageNum <= totalpage) { // 数据全部加载完成
      getAttentionData(attionparams);
      setState({pageNum: pageNum+1});
    }
  }

  selectSubs =  (checkedKeys, datas, event) => {
    const {setState,subVisible} = this.props.staffKanbanStore;
    let arr = [];
    datas && datas.map(res => {
      arr.push(res.name);
    });
    setState({selectKeyArr: checkedKeys, selectHrmStr: arr});
  }

  onCheckStrictlyChange = (bool) => {
    const {setState,defaultkey,defaultHrm} = this.props.staffKanbanStore;
    if(bool) {
      setState({subVisible: !bool, selectKeyArr: defaultkey, selectHrmStr: toJS(defaultHrm)});
    }else{
      setState({subVisible: !bool});
    }
  }

  backDefault = () => {
    const {getMySubs,defaultkey,setState,defaultHrm} = this.props.staffKanbanStore;
    let datas = [{id: '', name: ' '}];
    this.refs.mysubs.set(datas);

    setState({selectKeyArr: defaultkey,selectHrmStr: toJS(defaultHrm)});
    getMySubs('', (id)=>this.setState({selectkeys: id}));
  }

  render() {
    let topTab = [
      {
        title: getLabel(596,'上级'),
        viewcondition: 0
      },
      {
        title: getLabel(442,'下属') ,
        viewcondition: 1
      },
      {
        title: getLabel(25436,'关注'),
        viewcondition: 2
      },
    ];
    let allselect = [{
      key: "0",
      showname: getLabel(332,'全部')
    }]
    const {viewcondition,selectkeys,selectAllkey,} = this.state;
    const {hrmloading, pageNum, totalpage, mysubs, attentionData, myboss,subVisible,defaultkey,getAttentionData,tabSpinning} = this.props.staffKanbanStore;
    let hrmdatas = viewcondition == 2 ? toJS(attentionData) : toJS(myboss);
    let srcollHeight = jQuery('.staff-kanban-leftcontainer').height();
    return (
      <div className='staff-kanban-leftcontainer'>
         <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@4eakv4`}
          datas = {topTab}
          keyParam="viewcondition"
          onChange = {(e) => {this.changeTab(e)}}
          selectedKey = {viewcondition}
        />
          <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@nrsx50`} spinning={tabSpinning}>
            {
              (viewcondition == 0 || viewcondition == 2 )&& <div>
                <div className='select_hrm'>
                  <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@9oggxt`}
                    options={allselect}
                    detailtype={2}
                    value={selectAllkey}
                    onChange={v=>{this.selectAll(v)}}
                  /> 
                  {viewcondition == 2 && <div style={{display: 'inline-block',marginLeft: '100px'}}>
                    <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@vxoyr1`}
                      type={17}
                      title={getLabel(83496,'多人力资源')}
                      textDecoration={true}
                      customized
                      memorise // 添加默认值
                      onChange={(ids, names, datas)=> this.addAttentionBrowser(ids)}
                      isSingle={false}
                      replaceDatas={toJS(attentionData)}
                    >
                      <span className='icon-coms-Need-feedback' style={{marginLeft: '10px',fontSize: '16px',color: '#999'}} onClick={()=>getAttentionData({needSelf: 1, noLimit: 1})}></span>  
                    </WeaBrowser>
                  </div>} 
                </div>
                <WeaNewScrollPagination ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScrollPagination@kzunae`}
                  height={srcollHeight - 48 - 30}
                  loading={hrmloading}
                  offset={30}
                  overtime={1000}
                  intervalTime={500}
                  onScrollEnd={() => {this.getPagenumAttention()}}
                >
                  <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@hadjjz`}
                    options={hrmdatas}
                    detailtype={2}
                    value={selectkeys}
                    onChange={v=>{this.selectOne(v)}}
                  />  
                  <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@0wdiwn`} spinning={hrmloading}  tip={getLabel(500408,'加载中...')} size='small'>
                    {(viewcondition == 2) &&pageNum > totalpage && <Alert ecId={`${this && this.props && this.props.ecId || ''}_Alert@pyybsu`}
                      description={getLabel(505881,'数据已全部加载')}
                      type="info"
                    />}
                  </Spin>
                </WeaNewScrollPagination>
              </div>
            }
            { // 下属
              viewcondition == 1 &&  <div> 
                <div className='left-mysubs'>
                  <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@8ncjlx`}
                    ref='mysubs'
                    type={1}
                    linkUrl="/hrm/resource/HrmResource.jsp?id=" 
                    title={getLabel(179,'人力资源')} 
                    viewAttr="2"
                    customIcon={'icon-coms-Reset'}
                    addOnClick={(values)=> {this.backDefault()}}
                    inputStyle={{width: 200}}
                    onChange={(id, names, datas)=> {this.changeHrm_subs(id, names, datas)}}
                  />
                </div>
                <div className={'my-sub-container'} style={{ height: srcollHeight - 48 - 50 }}>
                  <WeaTree ecId={`${this && this.props && this.props.ecId || ''}_WeaTree@jqo20e`}
                    checkable
                    showCheckStrictly
                    checkStrictly={subVisible}
                    checkStrictlyTitle={subVisible ? getLabel(128725,'包含下级') : getLabel(387277,'不包含下级')}
                    onCheck={(checkedKeys,nodeids,datas,event)=> {this.selectSubs(checkedKeys, datas, event)}}
                    onCheckStrictlyChange={(bool) => this.onCheckStrictlyChange(bool)}
                    checkedKeys={selectkeys}
                    datas={toJS(mysubs)}
                    loadData={(item)=>{
                      let param = {
                        type: item.type,
                        id: item.id
                      }
                      return Api.getMySubs(param).then(res => res);;
                    }}
                  />
                </div>
              </div>
            }
          </Spin>
      </div>)
  }
}

export default LeftContainer;